<template>
  <div class="contact-info-item">
    <div class="flex items-start">
      <div class="contact-icon w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary mr-4">
        <i :class="['fa', icon]" aria-hidden="true"></i>
      </div>
      <div>
        <h3 class="font-medium text-gray-800 mb-2">{{ title }}</h3>
        <div class="space-y-1">
          <p v-for="(item, index) in items" :key="index" class="text-gray-500">
            {{ item }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContactInfo',
  props: {
    icon: {
      type: String,
      required: true,
      default: 'fa-info'
    },
    title: {
      type: String,
      required: true
    },
    items: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

<style scoped>
.contact-info-item {
  display: flex;
  align-items: flex-start;
}

.contact-icon {
  flex-shrink: 0;
}

.contact-icon i {
  font-size: 18px;
}
</style>